<template>
	<section class="body">
		<div class="lozenge">
		  <div class="head">
		    <div class="hair"></div>
		    <div class="ears">
		      <div class="ear ear-left"></div>
		      <div class="ear ear-right"></div>
		    </div>
		    <div class="face">
		      <div class="beard">
		        <div class="mouth">
		          <div class="tongue"></div>
		          <div class="teeth"></div>
		        </div>
		      </div>
		      <div class="sideburns">
		        <div class="sideburn sideburn-left"></div>
		        <div class="sideburn sideburn-right"></div>
		      </div>
		      <div class="eyes">
		        <div class="eye eye-left">
		          <div class="pupil pupil-left"></div>
		          <div class="brow"></div>
		        </div>
		        <div class="eye eye-right">
		          <div class="pupil pupil-right"></div>
		          <div class="brow"></div>
		        </div>
		        <div class="bridge"></div>
		      </div>
		      <div class="nose"></div>
		      <div class="quiff"></div>
		    </div>
		  </div>
		</div>
	</section>	
</template>

<script type="text/javascript">
import $ from 'jquery'
	export default {
		methods: {
			init () {
				var addEvent = function (object, type, callback) {
					if (object == null || typeof(object) == 'undefined') return
					if (object.addEventListener) {
						object.addEventListener(type, callback, false)
					} else if (object.attachEvent) {
						object.attachEvent('on' + type, callback)
					} else {
						object['on'+type] = callback
					}
				}

				var w = window,
						d = document,
						e = d.documentElement,
						g = d.getElementsByTagName('body')[0],
						x = w.innerWidth || e.clientWidth || g.clientWidth,
						y = w.innerHeight || e.clientHeight || g.clientHeight

				var horizSliderVal = 0;
				var vertSliderVal = 0;

				addEvent(document, 'mousemove', function (e) {
					horizSliderVal = (x / 2 - e.clientX) / (x / 2) * -1
					vertSliderVal = (y / 2 - e.clientY) / (y / 2)
					makeFaceMove()
				})

				addEvent(document, 'resize', function () {
					x = w.innerWidth || e.clientWidth || g.clientWidth
					y = w.innerHeight || e.clientHeight || g.clientHeight
				})

				function makeFaceMove () {
					var elementAndPositionList = []

					// nose
					var noseProps = {
						'elementName': '.nose',
						'props': {
							'left': (50 + (17.5 * horizSliderVal)).toString() + '%',
							'top': (40 - (10 * vertSliderVal)).toString() + '%'
						}
					}
					elementAndPositionList.push(noseProps)

					// eyes
					var eyeProps = {
						'elementName': '.eyes',
						'props': {
							'left': (50 + (15 * horizSliderVal)).toString() + '%',
							'top': (50 - (9 * vertSliderVal)).toString() + '%'
						}
					}
					elementAndPositionList.push(eyeProps)

					var leftEyeProps = {
						'elementName': '.eye-left',
						'props': {
							'left': (2.5 - (5 * horizSliderVal)).toString() + '%',
							'width': (40 + (5 * horizSliderVal)).toString() + '%'
						}
					}
					elementAndPositionList.push(leftEyeProps)

					var leftPupilProps = {
					"elementName": ".pupil-left",
					"props": {
						"left": (60 + (10 * horizSliderVal)).toString() + "%",
						"top": (50 - (20 * vertSliderVal)).toString() + "%",
						}
					}
					elementAndPositionList.push(leftPupilProps)

					var rightPupilProps = {
						"elementName": ".pupil-right",
						"props": {
							"left": (40 + (10 * horizSliderVal)).toString() + "%",
							"top": (50 - (20 * vertSliderVal)).toString() + "%",
						}
					}
					elementAndPositionList.push(rightPupilProps)

					var rightEyeProps = {
						"elementName": ".eye-right",
						"props" : {
							"right": (2.5 + (5 * horizSliderVal)).toString() + "%",
							"width": (40 - (5 * horizSliderVal)).toString() + "%"
						}
					}
					elementAndPositionList.push(rightEyeProps)

					// bridge
					var glassesBridgeProps = {
					"elementName": ".bridge",
						"props" : {
							"left": (50 + (1 * horizSliderVal)).toString() + "%"
						}
					}
					elementAndPositionList.push(glassesBridgeProps)

					// face
					var faceProps = {
					"elementName": ".face",
						"props" : {
							"left": (50 + (2 * horizSliderVal)).toString() + "%"
						}
					}
					elementAndPositionList.push(faceProps)

					// beard
					var beardProps = {
				    "elementName": ".beard",
				    "props" : {
				      "left": (50 + (5 * horizSliderVal)).toString() + "%",
				      "top": (60 - (6 * vertSliderVal)).toString() + "%",
				      "width": (30 - (5 * Math.abs(horizSliderVal))).toString() + "vh",
				      "height": (20 + (3 * vertSliderVal)).toString() + "vh"
				    }
				  }
				  elementAndPositionList.push(beardProps);

				  var mouthProps = {
				    "elementName": ".mouth",
				    "props" : {
				      "left": (50 - (1.5 * horizSliderVal)).toString() + "%",
				      "top": (50 - (5 * vertSliderVal)).toString() + "%",
				      "width": (15 - (2.5 * Math.abs(horizSliderVal))).toString() + "vh",
				      "height": (10 - (2.5 * Math.abs(vertSliderVal))).toString() + "vh"
				    }
				  }
				  elementAndPositionList.push(mouthProps);

				  var teethProps = {
				    "elementName": ".teeth",
				    "props" : {
				      "left": (50 - (10 * horizSliderVal)).toString() + "%",
				      "top": "-" + (30 + (25 * Math.abs(vertSliderVal))).toString() + "%"
				    }
				  }
				  elementAndPositionList.push(teethProps);

				  var tongueProps = {
				    "elementName": ".tongue",
				    "props" : {
				      "left": (50 - (100 * parseFloat(horizSliderVal))).toString() + "%",
				      "top": (50 + (50 * vertSliderVal)).toString() + "%",
				      //"width": (30 - (20 * Math.abs(vertSliderVal))).toString() + "vh"
				    }
				  }
				  elementAndPositionList.push(tongueProps);

				  var earProps = {
				    "elementName": ".ears",
				    "props" : {
				      "left": (50 - (2.5 * horizSliderVal)).toString() + "%",
				      "top": (57 + (2.5 * vertSliderVal)).toString() + "%"
				    }
				  }
				  elementAndPositionList.push(earProps);

				  var leftEarProps = {
				    "elementName": ".ear-left",
				    "props" : {
				      "left": 2.5 * Math.abs(horizSliderVal).toString() + "%",
				      "width": (10 + (2.5 * horizSliderVal)).toString() + "vh",
				      "height": (15 - (2.5 * Math.abs(vertSliderVal))).toString() + "vh"
				    }
				  }
				  elementAndPositionList.push(leftEarProps);

				  var rightEarProps = {
				    "elementName": ".ear-right",
				    "props" : {
				      "right": 2.5 * Math.abs(horizSliderVal).toString() + "%",
				      "width": (10 - (2.5 * horizSliderVal)).toString() + "vh",
				      "height": (15 - (2.5 * Math.abs(vertSliderVal))).toString() + "vh"
				    }
				  }
				  elementAndPositionList.push(rightEarProps);

				  var quiffProps = {
				    "elementName": ".quiff",
				    "props" : {
				      "left": (50 - (2.5 * horizSliderVal)).toString() + "%",
				      "height": (10 - (2.5 * vertSliderVal)).toString() + "vh"
				    }
				  }
				  elementAndPositionList.push(quiffProps);

				  var sideburnProps = {
				    "elementName": ".sideburns",
				    "props": {
				      "top": (30 - (4 * vertSliderVal)).toString() + "%"
				    }
				  }
				  elementAndPositionList.push(sideburnProps);

				  var leftSideburnProps = {
				    "elementName": ".sideburn-left",
				    "props" : {
				      "border-left-width": (5 + (2.5 * horizSliderVal)).toString() + "vh",
				      //"left" : "-1vh"
				    }
				  }
				  elementAndPositionList.push(leftSideburnProps);

				  var rightSideburnProps = {
				    "elementName": ".sideburn-right",
				    "props" : {
				      "border-right-width": (5 - (2.5 * horizSliderVal)).toString() + "vh",
				    }
				  }
				  elementAndPositionList.push(rightSideburnProps);

				  moveElements(elementAndPositionList)
				}

				function moveElements (elementAndPositionList) {
					for (var i = 0, len = elementAndPositionList.length; i < len; i++) {
						var element = $(elementAndPositionList[i].elementName)
						for (var key in elementAndPositionList[i].props) {
							element.css(key, elementAndPositionList[i].props[key])
						}
					}
				}
			},
		},
		mounted () {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	$unit: 1vh;
	.body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		min-width: 100%;
		min-height: 100%;
		background-color: #184640;
	}
	* {
		box-sizing: border-box;
		position: absolute;
	}
	.lozenge {
		width: $unit * 75;
		height: $unit * 75;
		border: $unit * 2 solid #fff;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		overflow: hidden;
		background-color: #2b9a9a;
	}
	.head {
		width: $unit * 71;
		height: $unit * 71;
	}
	.hair {
		width: $unit * 45;
	  height: $unit * 50;
	  background-color: #5B3914;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -65%);
	  border-radius: $unit * 25;
	}
	.ears {
		left: 50%;
		top: 57%;
		transform: translate(-50%, -50%);
		height: $unit * 15;
		width: $unit * 55;
		.ear {
			background-color: #F4D7CB;
			border-radius: 50%;
			width: $unit * 10;
			height: $unit * 15;
			transform: rotate(-15deg);
			left: 0;
			&::before,
			&::after {
				content: " ";
				width: 80%;
				height: 80%;
				background-color: #DFA59B;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				position: absolute;
				border-radius: 50%;
			}
			&::after {
				width: 50%;
				height: 50%;
				background-color: #F4D7CB;
				left: 50%;
				top: 40%;
				transform: rotate(15deg);
			}
			&.ear-right {
				transform: rotate(15deg);
				right: 0;
				left: auto;
				&::after {
					left: 10%;
					transform: rotate(-15deg);
				}
			}
		}
	}
	.face {
		position: relative;
		width: $unit * 40;
		height: $unit * 60;
		background-color: #F4D7CB;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: $unit * 20;
		border: $unit * 2 solid #5B3914;
	}
	.sideburns {
		left: 50%;
		top: 30%;
		transform: translate(-50%, -50%);
		width: $unit * 40;
		height: $unit * 14;
		position: relative;
		overflow: hidden;
		.sideburn {
			position: absolute;
			left: 0;
			top: 0;
			border-color: transparent;
			border-left-color: #5B3914;
			border-style: solid;
			content: " ";
			border-width: $unit * 5 $unit * 5 $unit * 10;
			transform: rotate(-12deg);
		}
		.sideburn-right {
			left: auto;
			right: 0;
			border-left-color: transparent;
			border-right-color: #5B3914;
			transform: rotate(12deg);
		}
	}
	.beard {
		width: $unit * 30;
		height: $unit * 20;
		background-color: #5B3914;
		left: 50%;
		top: 60%;
		transform: translate(-50%, $unit * 5);
		border-radius: 50%;
		overflow: hidden;
	}
	.mouth {
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -40%);
		width: $unit * 15;
		height: $unit * 10;
		background-color: #7D3126;
		border-radius: $unit * 4 $unit * 4 $unit * 10 $unit * 10;
		overflow: hidden;
		.tongue {
			background-color: #D96269;
			width: $unit * 30;
			height: $unit * 10;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
		}
		.teeth {
			background-color: #fff;
			width: $unit * 12;
			height: $unit * 5;
			left: 50%;
			top: -30%;
			border-radius: $unit * 5;
			transform: translateX(-50%);
		}
	}
	.eyes {
		width: $unit * 42;
		height: $unit * 10;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -40%);
		.bridge {
			position: absolute;
			width: $unit * 10;
	    height: $unit * 4;
	    content: " ";
	    border: $unit * 1 solid transparent;
	    border-top-color: #3A2117;
	    border-radius: 50%;
	    left: 50%;
	    transform: translateX(-50%); 
		}
		.eye {
			background-color: rgba(255, 255, 255, .4);
			width: 40%;
			height: 100%;
			left: 2.5%;
			border-radius: $unit * 2;
			border: $unit * 1 solid #3A2117;
			.brow {
				border-color: #5B3914;
	      border-style: solid;
	      content: " ";
	      width: 0;
	      height: 0;
	      position: absolute;
	      left: 0;
	      top: -($unit * 6);
	      border-top-color: transparent;
	      border-left-color: transparent;
	      border-left-width: $unit * 14;
	      border-bottom-width: $unit * 3;
	      border-top-width: 0;
	      border-right-width: 0;
	      transform: rotate(-8deg);
			}
			.pupil {
				left: 60%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #3A2117;
				width: $unit * 3;
				border-radius: 50%;
				animation: blinker 5s infinite;
			}
			&.eye-right {
				left: auto;
				right: 2.5%;
				.brow {
					border-right-color: transparent;
	        border-right-width: $unit * 14;
	        border-left-width: 0;
	        border-left-color: #5B3914;
	        transform: rotate(8deg);
	        left: auto;
	        right: 0;
	        &::before {
	        	left: 0;
	        }
				}
				.pupil {
					left: 40%;
				}
			}
		}
	}
	.nose {
		left: 50%;
		top: 40%;
		transform: translate(-50%, 100%);
		background-color: #F98382;
		width: $unit * 10;
		height: $unit * 10;
		border-radius: $unit * 5;
		&::before {
	    position: absolute;
	    content: " ";
	    border-color: transparent;
	    border-bottom-color: #F98382;
	    border-width: 0 $unit * 4 $unit * 10 $unit * 4;
	    width: $unit * 2;
	    height: 0;
	    border-style: solid;
	    left: 0%;
	    top: -($unit * 5.9);
	  }
	    
	  &::after {
	    position: absolute;
	    background-color: #F98382;
	    content: " ";
	    width: $unit * 2;
	    height: $unit * 2;
	    top: -($unit * 6.8);
	    border-radius: 50% 50% 0 0;
	    left: 50%;
	    transform: translateX(-50%);
	  }
	}
	.quiff {
		left: 50%;
		top: -($unit * 4);
		transform: translateX(-50%);
		width: $unit * 20;
		height: $unit * 10;
		border-radius: 50%;
		background-color: #5B3914;
	}
	@keyframes blinker {
	  0% {
	    width: $unit * 3;
	    height: $unit * 4;
	  }
	  60% {
	    width: $unit * 3;
	    height: $unit * 4;
	  }
	  61% {
	    width: $unit * 5;
	    height: $unit * 0.1;
	  }
	  63% {
	    width: $unit * 3;
	    height: $unit * 4;
	  }
	  90% {
	    width: $unit * 3;
	    height: $unit * 4;
	  }
	  91% {
	    width: $unit * 5;
	    height: $unit * 0.1;
	  }
	  95% {
	    width: $unit * 3;
	    height: $unit * 4;
	  }
	}
</style>